import React from 'react'
import { Card, Dropdown, Menu } from 'antd';
import { StopOutlined, EllipsisOutlined, ApiOutlined } from '@ant-design/icons';
import styles from './index.less'
const { Meta } = Card
const CrawCard = () => {
    /**
     * 更多选择配置
     */
    const menu = (
        <Menu>
            <Menu.Item>
                <a target="_blank" rel="noopener noreferrer" href="http://www.alipay.com/">
                    修改开始页面
            </a>
            </Menu.Item>
            <Menu.Item>
                <a target="_blank" rel="noopener noreferrer" href="http://www.taobao.com/">
                    修改爬取目标分类
            </a>
            </Menu.Item>
            <Menu.Item>
                <a target="_blank" rel="noopener noreferrer" href="http://www.tmall.com/">
                    导出当前数据
            </a>
            </Menu.Item>
        </Menu>
    )
    return (
        <Card
            className={styles.cardBox}
            cover={
                <img
                    style={{ padding: '15px' }}
                    alt="example"
                    src={require('../../../../public/images/beike.jpg')}
                />
            }
            actions={[
                <span className={styles.start}>
                    <ApiOutlined key="setting" style={{ marginRight: '5px', fontSize: '16px' }} />
                    开始
                </span>
                ,
                <span className={styles.end} style={{ pointerEvents: 'none', color: '#877F6C' }}>
                    <StopOutlined key="edit" style={{ marginRight: '5px', fontSize: '16px' }} />
                    停止
                </span>
                ,
                <Dropdown overlay={menu} placement="topLeft">
                    <EllipsisOutlined key="ellipsis" />
                </Dropdown>
                ,
            ]}
        >
            <div className={styles.box}>
                <div className={styles.left}>
                    <div>
                        爬取状态
                    </div>
                    <div>
                        <div>
                            <span style={{ backgroundColor: '#5DAC81' }}></span>
                            <span>运行</span>
                        </div>
                        <div>
                            <p>开始页面：1</p>
                            <p>当前分类：二手房</p>
                        </div>
                    </div>

                </div>
                <div className={styles.right}>
                    <div>
                        <p>爬取次数</p>
                        <p>231</p>
                    </div>
                    <div>
                        <p>爬取数量</p>
                        <p>21313</p>
                    </div>
                    <div>
                        <p>上次结束时间</p>
                        <p>2020-10-21</p>
                    </div>
                </div>
            </div>
        </Card>
    )
}

export default CrawCard